<script setup>
import ProductSpecifications from "@/components/ProductSpecifications.vue";
import GoodsSelect from "@/components/GoodsSelect.vue";
import { useCreate } from "@/store/useCreate.js";
import { ElMessage } from "element-plus";
import { onMounted, ref, watch } from "vue";
import { storeToRefs } from "pinia";


const createStore = useCreate();

const { formData, openTrialVersion } = storeToRefs(createStore);

onMounted(() => {
  if (formData.value.experience && formData.value.experience.goodsAmount > 0) {
    openTrialVersion.value = true;
  } else {
    openTrialVersion.value = false;
    formData.value.experience = {
      deliver: [{ content: "" }, { content: "" }, { content: "" }],
      introduce: "",
      goodsAmount: null,
      versionType: 2,
      deliverDays: null,
    };
  }
});

const experienceForm = ref();
const standardForm = ref();
const confirm = async () => {
  try {
    const createStore1 = await standardForm.value.checkForm();
    if (openTrialVersion.value) {
      const createStore2 = await experienceForm.value.checkForm();
    }
    createStore.setCurrentStepId(5);
    createStore.setRequiredNumber(3, 0);
  } catch (e) {
    console.log(e);
    ElMessage.warning("请完整填写表单数据");
  }
};
</script>

<template>
  <div class="header">
    <div class="left">
      <h4>按成果定价</h4>
      <p>
        在约定时间范围内交付一件可量化的工作成果，如3天交付一个logo设计源文件。
      </p>
    </div>
    <div>
      <el-button class="confirm-btn" @click="confirm">确认</el-button>
    </div>
  </div>
  <div class="form-box">
    <div class="left">
      <!-- 标准版 -->
      <ProductSpecifications
        ref="standardForm"
        formKey="standard"
        v-if="formData.standard"
      />
      <!-- 体验版 -->
      <ProductSpecifications
        v-if="formData.experience"
        ref="experienceForm"
        formKey="experience"
        :edit-type="2"
      />
    </div>
    <div class="right-view">
      <div class="view-box">
        <h4>预览</h4>
        <p>请在左侧填写规格</p>
        <GoodsSelect />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  .left {
    flex: 1;
    h4 {
      font-size: 16px;
      margin-bottom: 8px;
    }
    p {
      color: rgba(25, 30, 40, 0.48);
      font-size: 14px;
    }
  }
  .confirm-btn {
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    color: #fff;
    font-size: 16px;
    border: none;
  }
}
.form-box {
  display: flex;
  margin-top: 16px;
  .left {
    flex: 0 0 500px;
  }
  .right-view {
    flex: 1;
    background: #f9fafb;
    border-radius: 16px 16px 16px 16px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
  }
}
.right-view {
  .view-box {
    width: 430px;
  }
  h4 {
    color: #191e28;
    font-size: 16px;
    margin-bottom: 6px;
  }
  p {
    color: rgba(25, 30, 40, 0.48);
    margin-bottom: 16px;
  }
}
</style>